<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    #box {
      width: 20px; /* 设置宽度 */
      height: 20px; /* 设置高度 */
      background-color: #f0f0f0; /* 设置背景颜色 */
      border: 1px solid #ccc; /* 设置边框 */
      border-radius: 5px; /* 设置圆角 */
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 设置阴影 */
    }
  </style>

  <body>
    <form id="test-form">
      <input type="text" name="test" />
      <button type="button" onclick="doSubmitForm()">Submit</button>
      <div id="box"></div>
    </form>

    <input type="datetime-local" id="time" value="2021-12-02T20:21:12" />

    <!-- http://localhost:8888/hello/login -->

    <form id="test-form1" onsubmit="return doSubmitForm()">
      
      <input type="text" name ='username' id="username" value="" />

      <input type="password" name = 'pwd' id="pwd" value="" /><span>o</span>


      <!-- <button onclick="doSubmitForm()">submit</button> -->
      <button>submit</button>
    </form>

    <div>
      <label> <input type="checkbox" id="selectAll" /> Select All </label>

      <br />

      <label> <input type="checkbox" class="checkbox" /> Option 1 </label>

      <label> <input type="checkbox" class="checkbox" /> Option 2 </label>

      <label> <input type="checkbox" class="checkbox" /> Option 3 </label>
    </div>

    <script>

       // 根据鼠标悬浮改变盒子颜色
      const o = document.querySelector("span");
      const divBox = document.querySelector("#box");

      divBox.addEventListener("mouseover", () => {
        divBox.style.backgroundColor = "red";
      });
      divBox.addEventListener("mouseout", () => {
        divBox.style.backgroundColor = "#f0f0f0";
      });

      //全选
      const selectAllCheckbox = document.getElementById("selectAll");
      const checkboxes = document.querySelectorAll(".checkbox");

      selectAllCheckbox.addEventListener("change", function () {
        checkboxes.forEach(function (checkbox) {
          checkbox.checked = selectAllCheckbox.checked;
        });
      });
   

      //密码的可见与不可见
      o.addEventListener("click", see);


      function see() {
        const pwd = document.querySelector("#pwd");

        if (pwd.type == "password") {
          pwd.type = "text";
        } else {
          pwd.type = "password";
        }
      }

      //事件绑定,进行一个定时器执行
      setInterval(() => {
        const time = document.querySelector("#time");

        let now = new Date();

        // 获取年月日时分秒
        let year = now.getFullYear();
        let month = (now.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，因此要加1
        let day = now.getDate().toString().padStart(2, "0");
        let hours = now.getHours().toString().padStart(2, "0");
        let minutes = now.getMinutes().toString().padStart(2, "0");
        let seconds = now.getSeconds().toString().padStart(2, "0");

        // 拼接成指定格式的字符串
        let dateTimeString = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;

        time.value = dateTimeString;
      }, 1000);


      //对form表单执行
      function doSubmitForm() {

        var form = document.getElementById('test-form1');

        let pwd = form.elements[1];

          
        if(pwd.value.length<8){
          alert("changdubugou")
          return false
        }
        
        // 可以在此修改form的input...


        // 提交form:
        // form.submit();

        return true
    }

    </script>
  </body>
</html>
